import { Ionicons } from "@expo/vector-icons";
import {
  GestureResponderEvent,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

export default function Header({
  name,
  onBack,
  onSearch,
}: {
  name: string;
  onBack: (event: GestureResponderEvent) => void;
  onSearch: (event: GestureResponderEvent) => void;
}) {
  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        padding: 12,
        borderBottomWidth: 1,
        borderBottomColor: "#e0e0e0",
        justifyContent: "space-between",
      }}
    >
      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
        <TouchableOpacity onPress={onBack} style={{ padding: 6 }}>
          <Ionicons name="chevron-back" size={26} color="#333" />
        </TouchableOpacity>
        <Text
          numberOfLines={1}
          ellipsizeMode="tail"
          style={{ fontSize: 16, maxWidth: 200, flexShrink: 1 }}
        >
          {name}
        </Text>
      </View>
      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
        <TouchableOpacity onPress={onSearch} style={{ padding: 8 }}>
          <Ionicons name="heart" size={28} />
        </TouchableOpacity>
        <TouchableOpacity onPress={onSearch} style={{ padding: 8 }}>
          <Ionicons name="search" size={28} />
        </TouchableOpacity>
      </View>
    </View>
  );
}
